<template>
    <section class="address-box">
      <ul>
        <li
          class="line-bottom"
          :class="'add-list' + index"
          v-for="(item,index) in addressData"
          :key="index"
          @touchstart="touchStart($event)"
          @touchmove="touchMove($event,'.add-list'+index)">
          <div class="msg fs14 inline-block pr">
            <p>{{item.name}}<span>{{item.tel}}</span> <i class="inline-block text-c pr" v-if="item.isDefault">默认</i></p>
            <p class="color7A7B82 fs12">{{item.address}}{{item.addressDetail}}</p>
            <i class="pa iconfont iconshangpinfenxiangtubiaox" @click.prevent="handleSet(1,item)"></i>
          </div>
          <div class="defined fs14 inline-block color7A7B82 text-c">
            <p @click.prevent="handleSet(2,item)">默认</p>
          </div>
          <div class="del fs14 inline-block text-c">
            <p @click.prevent="handleSet(3,item)">删除</p>
          </div>
        </li>
      </ul>
    </section>
</template>

<script type="text/ecmascript-6">


  export default {
    data() {
      return {
        x:'',
        y:'',
        X:'',
        Y:'',
        swipeX:'',
        swipeY:'',
        expansion:null,//保存点击的dom
      }
    },
    props:['addressData'],
    methods: {
      //选择
      handleSendId(item){
        this.$emit('send-id',{item:item})
      },
      handleSet(type,item){
        console.log(type, item);
        this.$emit('send-set',{type:type,item:item})
      },
      //编辑
      handleEditor(item){
        this.$emit('send-edit',{item:item})
      },
      //默认
      handleSetDefined(id){
        this.$emit('send-set-defined',{id:id})
      },
      //删除
      handleDel(id){
        this.$emit('send-del',{id:id})
      },
      touchStart(event){
        this.x = event.changedTouches[0].pageX;
        this.y = event.changedTouches[0].pageY;
        this.swipeX = true;
        this.swipeY = true;
        if (this.expansion){
          //判断是否展开，如果展开则收起
//          $(this.expansion).removeClass('swipeleft').addClass('initSwipe');
        }
      },
      touchMove(event,dom){
        this.X = event.changedTouches[0].pageX;
        this.Y = event.changedTouches[0].pageY;
        // 左右滑动
        if (this.swipeX && Math.abs(this.X - this.x) - Math.abs(this.Y - this.y) > 0){
          // 阻止事件冒泡
          event.stopPropagation();
          if (this.X - this.x > 10){   //右滑
            event.preventDefault();
            $(dom).removeClass('swipeleft').addClass('initSwipe'); //右滑收起
          }
          if (this.x - this.X > 10){   //左滑
            event.preventDefault();
            $(dom).addClass('swipeleft').removeClass('initSwipe'); //左滑展开
            this.expansion = dom;
          }
          this.swipeY = false;
        }
        // 上下滑动
        if (this.swipeY && Math.abs(this.X - this.x) - Math.abs(this.Y - this.y) < 0) {
          this.swipeX = false;
        }
      },
    },
  }
</script>

<style lang="scss">
  @import '../assets/css/base';

  .address-box{
    overflow: hidden;

    ul{
      width: 100%;
      height: auto;

      li{
        display: flex;
        width: calc(100% + 120px);
        min-height: 60px;
        height: auto;

        .msg{
          background-color: #fff;
          width: calc(100% - 120px);
          min-height: 60px;
          padding:13px 15px;
          box-sizing: border-box;

          p:nth-child(1){
            span{
              margin-left: 40px;
            }

            i{
              top:-2px;
              left:0;
              background-color: #B989F4;
              width: 28px;
              height: 14px;
              border-radius: 1px;
              margin-left: 9px;
              font-size: 10px;
              color: #fff;
              font-style: normal;
            }
          }

          p:nth-child(2){
            width: 80%;
            margin-top: 4px;
          }

          i.iconfont{
            right: 15px;
            top:50%;
            transform: translateY(-50%);
          }
        }

        .defined,
        .del{
          background-color: #F54E4E;
          display: flex;
          justify-content: center;
          align-items: center;
          width: 60px;
          min-height: 60px;
          color: #fff;
        }

        .defined{
          background-color: #FAFAFA;
        }
      }
    }
  }
</style>
